<template>
  <div id="app">
    <headnavbar>
      <template #left>
        <div class="head_name" @click="goback">
          <img
            class="return"
            src="https://www.hualigs.cn/image/60408d2367fba.jpg"
            alt=""
          />
          <span class="return_">返回</span>
        </div>
      </template>
      <template #center>
        <div class="head_name2">聊天室</div>
      </template>
      <template #right>
        <div class="head_name3">更多</div>
      </template>
    </headnavbar>

    <div class="content">
      <div class="userlist">
        <div class="userimg">
          <img src="./image/userlist.png" />
        </div>
        <div class="usernum">
          <div class="num">166</div>
          人热聊 ＞
        </div>
      </div>
      <div></div>
    </div>

    <div class="info_">
      <div class="info_content">
        <info :list="list" />
      </div>
      <router-view> </router-view>
    </div>

    <!-- 中间遮盖区域 -->
    <div class="zhegai">
      <div class="zhegai_center">
        <div class="gonggao">
          <p>公告</p>
          <div class="line"></div>
          <div class="desc">请大家自觉遵守规定，不要乱搞</div>
          <img
            class="zhegai_img"
            src="http://ww4.sinaimg.cn/bmiddle/9150e4e5gy1gal8r0i4qtj209h05ha9x.jpg"
            alt=""
          />
          <div @click="ontrue" class="edcv">知道了</div>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <div class="footer">
      <span class="footer_name">围观中，出现空位即可进行抢占</span>
      <router-link to="/ChatRoom/SecChatRoom"
        ><div class="footer_activ" @click="qiang">抢空位</div></router-link
      >
    </div>
  </div>
</template>
<script>
import info from "../../components/chatroom/info";
import headnavbar from "../../components/HeadNavBar";
export default {
  data() {
    return {
      list: [
        {
          name: "王者助手",
          content: "欢迎来到王者聊天室",
          img:
            "https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2356262881,4166898948&fm=26&gp=0.jpg",
          tag: 0
        }
      ]
    };
  },
  sockets: {
    receiveMsg(data) {
      console.log(data);
      let datas = this.$store.state.userinfo.userList;
      // console.log(datas);
      var flag = true;
      if (datas.length === 0) {
        this.$store.commit("setuserList", data);
      } else {
        for (let i = 0; i < datas.length; i++) {
          // console.log(datas[i]);
          if (datas[i].userid === data.userid) {
            datas[i].content = data.content;
            // console.log("第二次发");
            flag = false;
            break;
          }
        }
        if (flag === true) {
          this.$store.commit("setuserList", data);
          // console.log("第一次发");
        }
      }
    }
  },
  components: {
    headnavbar,
    info
  },
  methods: {
    goback() {
      this.$router.push({ path: "/community" });
      // 修改index值，此值控制底部标签颜色变化，设置为0，作用使社区颜色变蓝
      this.$store.commit("setindex", 0);
    },
    ontrue() {
      let a = document.getElementsByClassName("zhegai")[0];
      a.style.display = "none";
    },
    qiang() {
      let a = document.getElementsByClassName("footer")[0];
      a.style.display = "none";
      this.$socket.open();
    }
  }
};
</script>
<style scoped>
#app {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #f3f3f3;
}
.head_name {
  position: absolute;
  height: 25px;
  width: 60px;
  line-height: 25px;
}
.return {
  position: absolute;
  top: 2px;
  height: 21px;
  width: 21px;
}
.return_ {
  position: absolute;
  top: 0;
  left: 22px;
  height: 25px;
  line-height: 25px;
}
.head_name2 {
  margin: 0 auto;
}

.content {
  position: fixed;
  width: 100%;
  /* height: 560px; */
  background-color: #f0eff5;
  z-index: 999;
}

.userlist {
  width: 100%;
  height: 53px;
  background-color: #ffffff;
  display: flex;
  flex-flow: row;
}

.userimg img {
  position: relative;
  top: 8px;
}

.usernum {
  display: flex;
  flex-flow: row;
  font-size: 11px;
  color: #999999;
  position: absolute;
  right: 0;
  margin-top: 16px;
}

.usernum .num {
  color: #0099ff;
}

.footer {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  height: 40px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px 0 20px;
}
.footer_name {
  font-size: 12px;
  color: #646464;
}
.footer_activ {
  font-size: 12px;
  height: 30px;
  width: 60px;
  background-color: rgb(56, 149, 192);
  border-radius: 7px;
  line-height: 30px;
  text-align: center;
  color: #d6d6d6;
}

.zhegai {
  display: none;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 99;
}
.zhegai_center {
  height: 40%;
  width: 80%;
  margin: 50% auto;
  background-color: #ffffff;
  border-radius: 10px;
  text-align: center;
  font-size: 14px;
  padding: 5px 0 5px 0;
}
.line {
  height: 1px;
  background-color: black;
  width: 90%;
  margin-left: 5%;
}
.desc {
  margin-top: 10px;
}
.zhegai_img {
  height: 100px;
}
.edcv {
  height: 40px;
  width: 90%;
  background-color: #1fa5e4;
  border-radius: 5px;
  margin: 5px auto;
  line-height: 40px;
  color: #f0eff5;
}
.info_ {
  position: relative;
  top: 10%;
  right: 0;
  left: 0;
  bottom: 0;
  /* height: 100%; */
  padding: 10px 10px 10px 10px;
  background-color: #f3f3f3;
}
/* .info_content{

} */
</style>
